<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>华猫商城</title>
		<style></style>
		<link href="../css/jquery.validator.css" rel="stylesheet">
		<link href="../css/common.css" rel="stylesheet">

		<link href="../plugin/userLib/css/user.css" rel="stylesheet">
		<link href="../plugin/userLib/css/userinfo.css" rel="stylesheet">
		<link href="../plugin/userLib/css/my_user.css" rel="stylesheet">
		<link href="../css/base.css" rel="stylesheet">
		<link href="../plugin/layer/laydate/need/laydate.css" rel="stylesheet">
		<link href="../plugin/layer/laydate/skins/default/laydate.css" rel="stylesheet">
		<link href="../plugin/userLib/css/shop.css" rel="stylesheet">

		<style>
			.n-default .n-left,
			.n-default .n-right {
				margin-top: 32px!important;
			}
			
			* {
				font-size: 13px;
			}
			
			.ZZHT-order-list .order-heads td {
				padding: 15px 18px;
				border-bottom: 1px solid #fec5b1;
			}
			
			.status {
				border-left: 3px solid #666;
				line-height: 15px;
				padding-left: 10px;
			}
			
			.ZZHT-order-list .orderno {
				float: left;
				margin-right: 30px;
				width: 206px;
				text-align: left;
			}
			
			.prices {
				color: #ed5d2a;
				font-weight: 600;
			}
			
			.ZZHT-contact div {
				font-size: 13px;
				text-align: center;
			}
		</style>
	</head>

	<body>
		<div id="header"></div>
		<div id="headerBox"></div>
		<!--<div id="nav_menu"></div>-->
		<div class="ZZHT-wrap">
			<div class="ZZHT-header" style="border-bottom: 1px solid #ffffff;">
				<div class="ZZHT-shop-nav">
					<div class="ZZHT-nav-box">
						<a href="#">
							<li class="liselect ZZHT-lfloat ZZHT-nav-boxa">商城商家</li>
						</a>
						<div class="ZZHT-clear"></div>
					</div>
				</div>
				<div class="ZZHT-clear"></div>
			</div>
			<div class="ZZHT-main">
				<div id="onLine_left"></div>
				<div class="ZZHT-content">

					<div class="ZZHT-user-head clearfix"><span class="left fl">已发货订单</span><span class="right fr">当前位置：订单管理--待付款订单</span>
					</div>
					<div class="search-wrap">
						<form class="search-form" name="form">
							<label>
            订单编号：<input class="u-query" id="orderNo" name="orderNo" type="text">
        </label>
							<label>
            &nbsp;&nbsp;时间：<input class="laydate-icon u-query" type="text" name="beginTime" id="beginTime" placeholder="开始时间">
            - <input class="laydate-icon u-query" type="text" name="endTime" id="endTime" placeholder="结束时间">
        </label>
							<a href="javascript:;" class="btn-inquire" onclick="orderListByPage()"><i class="icon-search"></i></a>
						</form>
					</div>
					<div class="ZZHT-shop-content">
						<table class="ZZHT-order-list">
							<thead>
								<tr class="head">
									<th>订单详情</th>
									<th>支付方式</th>
									<th>配送信息</th>
									<th>金额</th>
									<th>操作</th>
								</tr>
							</thead>
							<tbody id="loadingBdy">
								<tr id="loading" class="empty-row" style="display: none;">
									<td colspan="5"><img src="../plugin/userLib/img/loading.gif">正在加载数据...</td>
								</tr>
							</tbody>
							<tbody class="j-order-row empty_tab">
								<tr>
									<td colspan="5" align="center" style="padding:5px 0px 5px 0px">暂无数据</td>
								</tr>
							</tbody>
							<tbody class="j-order-row" v-for="(v,i) in tab">
								<tr class='order-head order-heads'>
									<td colspan='5' align='right'>
										<div class="status">
											<div class='time'>{{v.createTime}}</div>
											<div class='orderno'>订单号：<span>{{v.orderNo}}</span></div>
											<div style="color:#ed5d2a;float: right;">{{v.orderStatus}}</div>
										</div>
									</td>
								</tr>
								<tr class='goods-box'>
									<td>
										<div class='goods-img'>
											<a href="" target='_blank'>
												<img v-if="v.goodsImg.substr(0,4)=='http'" :src="v.goodsImg" :title="v.goodsName" class="gImg">
												<img v-else :src="imgUrl+v.goodsImg" :title="v.goodsName" class="gImg">
											</a>
										</div>
										<div class='goods-name'>
											<div style="color:#333;font-size:14px;text-align: left;">{{v.goodsName}}</div>
											<div style="color:#999;font-size:12px;"></div>
										</div>
										<br />
										<div class='goods-extra'><span>1</span></div>
										<div class='goods-extra'><span>x</span></div>
										<div class='goods-extra'><span>{{'￥'+v.shopPrice}}</span></div>
									</td>
									<td rowspan="" align="center">
										<div class="paytypes">{{v.payType}}</div>
									</td>
									<td rowspan="" style="text-align: center;">
										<div class="delivermsg">{{v.expressId}}</div>
										<div class="delivermsg">{{v.expressNo}}</div>
										<div class="delivermsg">{{v.deliveryTime}}</div>
									</td>
									<td rowspan="" style="text-align: center;">
										<div class="shopmoney">商品金额：<span class="prices">{{'￥'+v.shopPrice}}</span></div>
										<div class="shopmoney">运费：<span class="prices">{{'￥'+v.deliverMoney}}</span></div>
										<div class="shopmoney">实付金额：<span class="prices">{{'￥'+v.realMoney}}</span></div>
									</td>
									<td rowspan="" style="border-right:0px;width:55px;">
										<div style="text-align:center;color:#666;">{{v.isAppraise}}</div>
										<div>
											<a href="#none" @click="print(i)">打印订单</a>
										</div>
										<div>
											<a :href='"orderDetail.html?orderId="+v.orderid'>订单详情</a>
										</div>
									</td>
								</tr>
							</tbody>

							<!--打印订单-->
							<tbody style="display: none;">
								<tr>
									<td colspan="5">
										<div id="print_content">
											<table width="100%" border="0" cellspacing="10">
												<tbody>
													<tr>
														<td colspan="6" style="text-align:center;font-weight:bold;font-size:26px">订单信息</td>
													</tr>
													<tr>
														<td colspan="2">下单时间：{{act.createTime}}</td>
														<td colspan="2">订单编号：{{act.orderNo}}</td>
														<td colspan="2">支付方式：{{act.payType}}</td>
													</tr>
													<tr>
														<td align="" colspan="2">发货时间：{{act.deliveryTime}}</td>
														<td align="" colspan="4">快递单号：{{act.expressNo}}</td>
													</tr>
													<tr>
														<td colspan="6" align="">收货地址：</td>
													</tr>
												</tbody>
											</table>
											<table width="100%" border="1" style="border-collapse:collapse;border-color:#000;">
												<tbody>
													<tr style="background:#cccccc;">
														<th align="center" style="padding:5px 0">商品名称</th>
														<th align="center">商品规格</th>
														<th align="center">商品价格</th>
														<th align="center">商品数量</th>
														<th align="center">小计</th>
													</tr>
													<tr>
														<td align="center"  style="padding:5px 0">{{act.goodsName}}</td>
														<td align="center" ></td>
														<td align="center" >¥{{act.shopPrice}}</td>
														<td align="center" ></td>
														<td align="center" >¥{{act.totalMoney}}</td>
													</tr>
												</tbody>
											</table>
											<table width="100%" border="0" cellspacing="10">
												<tbody>
													<tr>
														<td colspan="5" align="right">商品总金额：¥{{act.totalMoney}} </td>
													</tr>
													<tr>
														<td colspan="5" align="right">运费：¥{{act.deliverMoney}} </td>
													</tr>
													<tr>
														<td colspan="5" align="right">应付金额：¥ </td>
													</tr>
													<tr>
														<td colspan="5" align="right">实付金额：¥{{act.realMoney}} </td>
													</tr>
												</tbody>
											</table>
											<br>
											<table width="100%">
												<tbody>
													<tr>
														<td>商家:&nbsp;&nbsp;&nbsp;电话：</td>
														<td align="right">打印时间：</td>
													</tr>
												</tbody>
											</table>
										</div>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
					<div id="pager" style="text-align: center;"></div>
				</div>

			</div>
			<div style="clear:both;"></div>
			<br>
		</div>
		<div id="ck3"></div>
		<script src="../js/jquery.min.js"></script>
		<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script language="javascript" src="../plugin/jqprint/jquery-1.4.4.min.js"></script>
		<script language="javascript" src="../plugin/jqprint/jquery.jqprint-0.3.js"></script>
		<script src="../plugin/layer/layer.js" type="text/javascript" charset="utf-8"></script>
		<script src="../plugin/layer/laydate/laydate.js"></script>
		<script src="../js/common.js"></script>
		<script type="text/javascript" src="../js/ljf_base.js"></script>

		<script>
			var search_data = {};
			var pages = 1;
			var pageNum = 1;
			var shopId = '';

			$(function() {
				getList();
				initPage();
			})

			initDate();

			$('.empty_tab').hide();

			var vm = new Vue({
				el: '.ZZHT-order-list',
				data: {
					tab: [],
					act: {}
				},
				methods: {
					print: function(i) {
						console.log(i);
						this.act = this.tab[i];
						console.log(this.act);
						Vue.nextTick(function() {
							$("#print_content").jqprint();
						});
					}
				}
			});

			function getList() {
				$('#loading').show();
				var data = $.extend(true, {}, search_data);

				data.pageNum = pageNum;

				$.ajax({
					type: "get",
					url: SURL + "sktShops/findByUserId",
					async: false,
					data: {
						"userId": localStorage.userId,
					},
					success: function(res) {
						console.log(res);
						shopId = res.entity[0].shopId;
						data.shopId = shopId;

						$.ajax({ //获取记录列表
							type: "get",
							url: SURL + "/sktShops/findDaiShouOrders",
							data: data,
							async: false,
							timeout: 5000,
							dataType: 'json',
							success: function(res) {
								$('#loading').hide();
								pages = res.page;
								console.log(res);
								if(res.messageCode == 200) {
									if(res.entity.length > 0) {
										$('.empty_tab').hide();
									} else {
										$('.empty_tab').show();
									}
									vm.tab = res.entity;
									vm.$nextTick(function(){
										imgError();
									})
								} else {
									layer.msg(res.message);
								}
							},
							error: function(textStatus) {
								console.error(textStatus);
							},
							complete: function(XMLHttpRequest, status) {
								if(status == 'timeout') {
									layer.msg("网络超时，请刷新", function() {
										location.reload();
									})
								}
							}
						});

					}
				});
			}
		</script>
	</body>

</html>